<template>
  <section class="mobile-home-page">
    <div v-if="bannerList.length" class="banner-swipe-box">
      <van-swipe ref="bannerSwipe" class="banner-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="v in bannerList" :key="v.id" @click="openTab(v)">
          <img class="banner-item-img" :src="v.imageUrl"  />
        </van-swipe-item>
      </van-swipe>
      <img class="banner-swipe-up" src="@/assets/images/mobile/up.png" @click="onCheckSwipe('up')" />
      <img class="banner-swipe-next" src="@/assets/images/mobile/next.png" @click="onCheckSwipe('next')" />
    </div>
    <div v-for="v in plateList" :key="v.id" class="plate-box" @click="linkTo(v.linkArr)">
      <img class="plate-img" :src="v.img" />
    </div>
    <div class="user-box">
      <img class="user-title" src="@/assets/images/mobile/title-1.png" />
      <img class="user-item" src="@/assets/images/mobile/user-1.png" />
      <img class="user-item" src="@/assets/images/mobile/user-2.png" />
      <img class="user-item" src="@/assets/images/mobile/user-3.png" />
    </div>
    <div class="user-box">
      <img class="user-title" src="@/assets/images/mobile/title-2.png" />
      <img class="user-item" src="@/assets/images/mobile/user-4.png" />
      <img class="user-item" src="@/assets/images/mobile/user-5.png" />
      <img class="user-item" src="@/assets/images/mobile/user-6.png" />
    </div>
    <div>
      <CanvasMenu ref="canvasMenuMobile" id="canvas-menu-mobile-page" mapId="canvasMenuMobile" />
    </div>
    <FooterMenu />
  </section>
</template>

<script>
import { getBanner } from "@/request/api";
import plateOne from '@/assets/images/mobile/banner-1.png'
import plateTwo from '@/assets/images/mobile/banner-2.png'
import plateThree from '@/assets/images/mobile/banner-3.png'
import plateFour from '@/assets/images/mobile/banner-4.png'
import CanvasMenu from "@/components/canvasMenu/canvasMenu.vue";
import FooterMenu from "@/components/footerMenu/index.vue";
export default {
  // 组件名称
  name: "homeMobile",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    CanvasMenu,
    FooterMenu
  },
  // 组件状态值
  data() {
    return {
      bannerList: [],
      plateList: [
        {
          id: 1,
          img: plateOne,
          linkArr: ['companyList', 'hot'],
        },
        {
          id: 2,
          img: plateTwo,
          linkArr: ['jobList', 'hot'],
        },
        {
          id: 3,
          img: plateThree,
          linkArr: ['companyList', 'new'],
        },
        {
          id: 4,
          img: plateFour,
          linkArr: ['jobList', 'new'],
        }
      ]
    };
  },
  created() {
    getBanner({ pageNo: 1, pageSize: 10 }).then((res) => {
      if (res.code === 0 && res.data) {
        // status 0 = 发布中 ， 1 = 暂停发布
        //   <!-- banner类型 BannerType 0 学生小程序端图片、1 学生小程序端视频、2 学生小程序跳转链接、3 学生PC端图片、4 学生PC端视频、5 学生PC端跳转链接 -->
        let list = res.data.list.filter(
          (v) =>
            v.status === "0" && (v.type == 0 || v.type == 1 || v.type == 2)
        );
        this.bannerList = list;
        console.log('list', list)
      }
    });
  },
  // 组件方法
  methods: {
    linkTo(arr) {
      this.$emit('linkTo', arr)
    },
    openTab(item){
        if (item.forwardUrl && Number(item.type)=== 2) {
            window.open(item.forwardUrl, '_blank')
        }
    },
    onCheckSwipe(type) {
      if (type === 'up') {
        this.$refs.bannerSwipe.prev()
      } else {
        this.$refs.bannerSwipe.next()
      }
    }
  },
  beforeDestroy() {
  }
};
</script>
<style lang="less" scoped>
.mobile-home-page {
  display: none;
  overflow: hidden auto;
  .banner-swipe-box {
    position: relative;
    ::v-deep .van-swipe__indicator{
      width: 0.08rem;
      height: 0.08rem;
      background-color: #fff !important;
      opacity: 1;
    }
    ::v-deep .van-swipe__indicator:not(:last-child) {
      margin-right: 0.15rem;
    }
    ::v-deep .van-swipe__indicator--active {
      background-color: #3D6CB0 !important;
    }
  }
  .banner-swipe-up,
  .banner-swipe-next {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 0.38rem;
    height: 0.38rem;
    transform: translateY(-50%);
  }
  .banner-swipe-up {
    left: 0.06rem;
  }
  .banner-swipe-next {
    right: 0.06rem;
  }
  .banner-swipe {
    height: 2.6rem;
  }
  .banner-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .plate-box {
    margin-top: 0.45rem;
  }
  .plate-img {
    width: 100%;
  }
  .user-box {
    display: flex;
    padding: 0 0.1rem 0.2rem;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: #F6F8FA;
  }
  .user-title {
    margin-top: 0.2rem;
    margin-bottom: 0.26rem;
    width: 1.79rem;
  }
  .user-item {
    width: 100%;
    & + .user-item {
      margin-top: 0.1rem;
    }
  }
}
</style>
